<template>
  <PageWrapper>
    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="Pinia 中心化状态管理">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>

    <!-- 源码组件 -->
    <SourceDrawer ref="sourceDrawer" />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';
  import { PageWrapper } from '@/components/Page';
</script>

<script lang="ts">
  function getDoc() {
    return `
### 1.Pinia 简介
* Pinia 是 Vue 专属状态管理工具，允许跨组件、跨页面共享状态. pinia 也可以实现组件通信
* 官网: <a href="https://pinia.vuejs.org/zh/introduction.html">Pinia 官网</a>
* vben 已经集成了 pina 环境，可以直接使用

## 2. pinia 核心内容
* pinia 有三个核心概念
  * state(): 中心化存储的数据
  * getters(): 类似 vue 中的计算属性
  * actions(): 类似 vue 中的方法，用来修改数据  
* 支持组合式写法和传统写法

## 3.开发规范
* 所有文件存放在 src/store/modules 目录中
* 每个业务数据封装到一个 ts 文件中
* 命名规范: 
  * ts 文件中暴露的变量名规范 use + fileName
  * defineStore 中定义的id: fileName
 
`;
  }
</script>
